<!-- 历史数据 -->
<template>
  <div class="historyData" v-loading="hisLoading">
    <div class="searchBox">
      <el-form
        label-position="top"
        inline
        :model="searchForm"
        size="mini"
        style="max-height: 100px"
      >
        <el-form-item>
          <p slot="label" class="miniLabel">数据类型</p>
          <el-select
            v-model="dataType"
            placeholder="请选择数据类型"
            @change="changeSelect"
          >
            <p v-for="(item, index) of dataTypeList" :key="index">
              <el-option :label="item.label" :value="item.id"></el-option>
            </p>
          </el-select>
        </el-form-item>
        <el-form-item>
          <p slot="label" class="miniLabel">水站名称</p>
          <el-select
            v-model="searchForm.waterstation"
            placeholder="请选择水站名称"
            @change="changeStation"
          >
            <p v-for="(item, index) of stationList" :key="index">
              <el-option :label="item" :value="item"></el-option>
            </p>
          </el-select>
        </el-form-item>

        <el-form-item>
          <p slot="label" class="miniLabel">时间段</p>
          <el-date-picker
            v-model="timePickerDay"
            @change="changeTime"
            type="daterange"
            value-format="yyyy-MM-dd"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :picker-options="pickerOptions"
          ></el-date-picker>
        </el-form-item>
        <!-- <el-form-item>
          <p slot="label" class="miniLabel">开始时间</p>
          <el-date-picker
            v-model="searchForm.starttime"
            placeholder="选择开始时间"
            :clearable="false"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>
        <el-form-item>
          <p slot="label" class="miniLabel">结束时间</p>
          <el-date-picker
            v-model="searchForm.lasttime"
            placeholder="选择结束时间"
            :clearable="false"
            value-format="yyyy-MM-dd"
          ></el-date-picker>
        </el-form-item>-->

        <el-form-item>
          <p class="searchBtns">
            <el-button
              type="success"
              class="greenBtn"
              @click="submitSearch({ pageSize: pageSize, pageNum: 1 })"
              >筛选</el-button
            >
            <el-button type="success" class="greenBtn" @click="openExportOption"
              >导出</el-button
            >
            <el-button
              type="success"
              class="greenBtn"
              @click="retrieveData"
              v-show="
                !userInfo.roles.includes('manager') &&
                !userInfo.roles.includes('environmentalDirector')
              "
              >找回数据</el-button
            >
          </p>
        </el-form-item>
      </el-form>
    </div>
    <div class="showType">
      <div class="title" style="border-bottom: 1px solid #eee">
        历史数据
        <el-radio-group
          v-model="showType"
          size="small"
          @change="showTypeChange"
          style="margin-left: 12px"
        >
          <el-radio-button label="图表"></el-radio-button>
          <el-radio-button label="表格"></el-radio-button>
        </el-radio-group>
      </div>
    </div>

    <div class="dataChartCnt" v-if="showType === '图表'">
      <div class="dataChartBox">
        <div
          class="chart"
          v-for="(option, index) in lineOptions"
          :key="index"
          v-show="option.show"
        >
          <el-button
            size="mini"
            class="openchart"
            @click="openDetailChart(option)"
          >
            <i class="iconfont iconquanping"></i>
          </el-button>
          <lineChart :option="option" :isShow="option.show"></lineChart>
        </div>
        <p class="noData" v-show="!isNoData">暂无数据</p>
      </div>
    </div>
    <div class="hisDataTable" v-if="showType === '表格'">
      <template v-if="hisDataList.length > 0">
        <tableList
          :hisDataList="hisDataList"
          :factorField="factorField"
          :factorStatus="factorStatus"
          :dataTypeShow="dataType"
        ></tableList>
        <myPaging
          :func="pageUpdate"
          :total="historyDataTotal"
          :pageSizes="[12, 50, 100]"
        ></myPaging>
      </template>
      <p class="noData" v-else>暂无数据</p>
    </div>
    <!-- <div
      class="hisDataTable"
      v-if="showType === '表格' && dataType === 'mimute'"
    >
      <tableListMinute :hisDataList="minuhisDataList"></tableListMinute>
      <myPaging
        :func="pageUpdate"
        :total="realtotal"
        :pageSizes="[12, 50, 100]"
      ></myPaging>
    </div> -->
    <el-dialog
      :visible.sync="detailChartVisible"
      width="80%"
      custom-class="historyChart"
      append-to-body
    >
      <div class="deatailChartCnt">
        <div class="deatailChart" id="deatailChart"></div>
      </div>
    </el-dialog>

    <!-- 导出表格配置 -->
    <el-dialog :visible.sync="exportExcelVisible" append-to-body @close="close">
      <div slot="title">
        <p>导出表格</p>
      </div>
      <el-form :model="exportOption" size="mini" label-width="90px">
        <el-row>
          <el-form-item label="水站：">
            <el-select
              v-model="exportOption.stations"
              :multiple="is_multiple"
              placeholder="请选择需要导出的水站"
              style="width: 80%"
            >
              <el-option
                v-for="station in stationList"
                :key="station"
                :label="station"
                :value="station"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始时间：">
            <el-date-picker
              v-model="exportOption.starttime"
              type="datetime"
              placeholder="选择开始时间"
              :clearable="false"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="exportOption.lasttime"
              type="datetime"
              placeholder="选择结束时间"
              :clearable="false"
              value-format="yyyy-MM-dd HH:mm:ss"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-form-item label>
          <el-button type="primary" @click="exportExcel">导出</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <!-- 找回数据 -->
    <el-dialog :visible.sync="findVisible" append-to-body>
      <div slot="title">
        <p>找回数据</p>
      </div>
      <el-form :model="findOption" size="mini" label-width="90px">
        <el-row>
          <el-form-item label="水站：">
            <el-select
              v-model="findOption.waterstation"
              placeholder="请选择需要找回数据的水站"
              style="width: 80%"
            >
              <el-option
                v-for="station in stationList"
                :key="station"
                :label="station"
                :value="station"
              ></el-option>
            </el-select>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="开始时间：">
            <el-date-picker
              v-model="findOption.starttime"
              type="datetime"
              placeholder="选择开始时间"
              :clearable="false"
              value-format="yyyy-MM-dd HH:00:00"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label="结束时间：">
            <el-date-picker
              v-model="findOption.lasttime"
              type="datetime"
              placeholder="选择结束时间"
              :clearable="false"
              value-format="yyyy-MM-dd HH:00:00"
            ></el-date-picker>
          </el-form-item>
        </el-row>
        <el-form-item label>
          <el-button type="primary" @click="findHandle">确定</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import lineChart from "../components/charts.vue";
import common from "@/plugins/common";
import { mapGetters, mapActions, mapMutations, mapState } from "vuex";
import myPaging from "@/components/myPaging.vue";
import tableList from "@/components/tableList.vue";
import standard from "../plugins/standard.js";
import post from "@/plugins/request";
import { realform, reallist, realExcel } from "@/http/api.js";
export default {
  name: "historyData",
  data() {
    return {
      msg: "hello historyData!",
      hisLoading: false,
      searchForm: {
        waterstation: "",
        // starttime: "",
        // lasttime: "",
        isExcel: "no",
      },
      searchResult: {},
      timePickerDay: [],
      lineOptions: {},
      minuhisDataList: [],
      total: 0,
      detailChart: null,
      detailChartVisible: false,
      standard,
      showType: "图表",
      exportExcelVisible: false,
      exportOption: {
        stations: null,
        starttime: "",
        lasttime: "",
        isExcel: "no",
      },
      findOption: {
        waterstation: {},
        starttime: "",
        lasttime: "",
      },
      dataTypeList: [
        {
          label: "一小时数据",
          id: "oneHour",
        },
        {
          label: "两小时数据",
          id: "hour",
        },
        {
          label: "分钟数据",
          id: "mimute",
        },
      ],
      is_multiple: true,
      dataType: "hour",
      findVisible: false,
      pickerOptions: {
        disabledDate: (time) => {
          return time.getTime() > Date.now();
        },
      },
      isNoData: true,
      // realtotal: 0,
    };
  },
  async created() {
    await this.getStationListName({ dataType: 1 });
    //search 默认值操作
    this.searchForm.waterstation = this.stationList ? this.stationList[0] : "";
    this.timePickerDay = [
      common.changeDateToString(new Date(new Date().getTime() - 518400000)),
      common.changeDateToString(new Date()),
    ];
    this.submitSearch();
  },
  methods: {
    ...mapMutations(["changePageNum", "resetData"]),
    ...mapActions([
      "getStationListName",
      "getHistoryDataChart",
      "getHistoryDataList",
      "downHistoryDataListisExcel",
      "fetchRetrieveData",
    ]),
    configLineChart() {
      let chartData = this.searchResult.data || [];
      let newOptions = {};
      let translate = {};
      let standard = {};
      let lineOptions = {};
      this.searchResult.factorMessage.forEach((item, index) => {
        if (this.searchResult.factorField[item.name] !== undefined) {
          translate[this.searchResult.factorField[item.name]] = item.name;
          standard[this.searchResult.factorField[item.name]] =
            item.standardValue;
          newOptions[this.searchResult.factorField[item.name]] = new Array();
          lineOptions[this.searchResult.factorField[item.name]] = {};
        }
        if (this.searchResult.factorMessage.length - 1 === index) {
          newOptions["xAxis"] = new Array();
        }
      });
      for (let i = 0, len = chartData.length; i < len; i++) {
        for (var key in newOptions) {
          if (key !== "xAxis") {
            newOptions[key].push(chartData[i][key]);
          } else {
            if (this.dataType === "hour" || this.dataType === "oneHour") {
              newOptions[key].push(chartData[i].gmtMonitor);
            } else {
              newOptions[key].push(chartData[i].datatime);
            }
          }
        }
      }
      let defaultOption = {
        show: true,
        grid: {
          left: "11%",
        },
        title: {
          // text: 'pH/总磷',
          left: "center",
          top: 10,
          textStyle: {
            fontSize: 14,
          },
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          // data: newOptions.xAxis,
          type: "category",
          axisLabel: {
            formatter: (value) => value.replace(/ /, "\n"),
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
        },
        yAxis: {
          name: "mg/L",
          splitLine: {
            show: false,
          },
          axisTick: {
            inside: true,
          },
        },
        series: [
          {
            type: "line",
            stact: "总量",
            smooth: true,
            large: true,
            data: newOptions.ph,
            areaStyle: {},
            itemStyle: {},
          },
        ],
      };

      let optionColor = {
        ph: "#A3A6F6",
        COD: "#F47FC1",
        ammoniaNitrogen: "#5BB0F0",
        phosphorus: "#FF8282",
        nitrogen: "#F0D65B",
        nickel: "#67EBAB",
        cuprum: "#F09C5B",
        chromium: "#5DD3EC",
        prussiate: "#D4A3F6",
        zinc: "#5BF0E6",
        orp: "#5BF0E6",
        chroma: "#F09C5B",
        realFlow: "#5DD3EC",
        cumulativeFlow: "#D4A3F6",
        uv254: "#5BF0E6",
        cod: "#F47FC1",
      };
      this.$nextTick(() => {
        for (let i in lineOptions) {
          lineOptions[i] = common.deepClone(defaultOption);
          lineOptions[i].series[0].itemStyle.color = optionColor[i];
          lineOptions[i].series[0].areaStyle = {
            color: new this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: optionColor[i],
              },
              {
                offset: 1,
                color: "rgb(255, 255, 255)",
              },
            ]),
          };
          lineOptions[i].title.text = translate[i];
          lineOptions[i].xAxis.data = newOptions.xAxis.reverse();
          lineOptions[i].series[0].data = newOptions[i];
          lineOptions[i].series[0].name = translate[i];
          if (standard[i]) {
            lineOptions[i].series[0].markLine = {
              name: translate[i],
              silent: true,
              large: true,
              symbol: "none",
              data: [
                {
                  yAxis: standard[i],
                },
              ],
              label: {
                position: "end",
                // formatter: '标准线:{c}'
              },
              lineStyle: {
                color: "#e46f6f",
              },
            };
          }
          lineOptions[i].show =
            newOptions[i].filter((d) => d !== null).length > 0;
        }

        // ph special handle
        if (lineOptions["ph"]) {
          if (this.dataType === "hour" || this.dataType === "oneHour") {
            lineOptions["ph"].yAxis.max = 14; //ph
            lineOptions["ph"].yAxis.maxInterval = 2;
          } else {
            lineOptions["ph"].yAxis.max = 10; //ph
            lineOptions["ph"].yAxis.min = 6; //ph
            lineOptions["ph"].yAxis.maxInterval = 0.5;
          }
          lineOptions["ph"].yAxis.name = "";
          lineOptions["ph"].series[0].markLine.data = [
            {
              yAxis: standard["ph"].split("~")[1],
            },
            {
              yAxis: standard["ph"].split("~")[0],
            },
          ];
        }
        if (lineOptions["realFlow"]) {
          lineOptions["realFlow"].yAxis.name = "m³/s";
        }
        if (lineOptions["cumulativeFlow"]) {
          lineOptions["cumulativeFlow"].yAxis.name = "10⁴m³/h";
        }
        if (lineOptions["orp"]) {
          lineOptions["orp"].yAxis.name = "mV";
        }
        if (lineOptions["uv254"]) {
          lineOptions["uv254"].yAxis.name = "AU/cm";
        }
        if (lineOptions["turbidity"]) {
          lineOptions["turbidity"].yAxis.name = "NTU";
        }

        this.lineOptions = lineOptions;
        this.isNoData = Object.values(this.lineOptions)
          .map((v) => v.show)
          .includes(true);
      });
    },
    openDetailChart(option) {
      this.detailChartVisible = true;
      this.$nextTick(() => {
        this.detailChart = this.$echarts.init(
          document.getElementById("deatailChart")
        );
        this.initDeatailChart(option);
      });
    },
    initDeatailChart(option) {
      this.detailChart.setOption({
        grid: {
          bottom: 80,
        },
        title: {
          text: option.title.text,
          left: "center",
        },
        tooltip: {
          trigger: "axis",
        },
        xAxis: {
          type: "category",
          axisLabel: {
            formatter: (value) => value.replace(/ /, "\n"),
          },
          axisTick: {
            inside: true,
            alignWithLabel: true,
          },
          data: option.xAxis.data,
        },
        yAxis: [
          {
            name: option.yAxis.name,
            splitLine: {
              show: false,
            },
            axisTick: {
              inside: true,
              show: false,
            },
            max: option.title.text === "pH" ? 14 : null,
            maxInterval: option.title.text === "pH" ? 2 : null,
          },
        ],
        toolbox: {
          feature: {
            dataZoom: {
              yAxisIndex: false,
            },
            saveAsImage: {
              pixelRatio: 2,
            },
          },
        },
        dataZoom: [
          {
            type: "slider",
            end: 50,
          },
        ],
        series: [
          {
            name: option.series[0].name,
            type: "line",
            smooth: true,
            large: true,
            data: option.series[0].data,
            itemStyle: {
              color: option.series[0].itemStyle.color,
            },
            areaStyle: {
              color: option.series[0].areaStyle.color,
            },
            markLine: option.series[0].markLine,
          },
        ],
      });
    },
    pageUpdate(option) {
      this.submitSearch(option);
    },
    async submitSearch(
      pageOption = {
        pageSize: this.pageSize,
        pageNum: 1,
      }
    ) {
      let params = {};
      if (
        new Date(this.timePickerDay[0]).getTime() -
          new Date(this.timePickerDay[1]).getTime() >
        5184000000
      ) {
        this.$notify({
          type: "warning",
          title: "提示",
          message: "时间跨度不能超过2个月！",
        });
        return;
      }
      this.hisLoading = true;
      if (this.dataType === "hour" || this.dataType === "oneHour") {
        params = {
          waterstation: this.searchForm.waterstation,
          starttime: this.timePickerDay[0],
          lasttime: this.timePickerDay[1],
          isExcel: "no",
          dataType: this.dataType,
        };
        if (this.showType === "图表") {
          this.searchResult = await this.getHistoryDataChart(params);
          if (this.searchResult && this.searchResult.data) {
            this.lineOptions = {};
            this.configLineChart();
          }
        } else if (this.showType === "表格") {
          await this.getHistoryDataList({ ...params, ...pageOption });
        }
      } else {
        params = {
          waterstation: this.searchForm.waterstation,
          starttime: this.timePickerDay[0] + " 00:00:00",
          lasttime: this.timePickerDay[1] + " 23:59:59",
          isExcel: "no",
          dataType: this.dataType,
        };
        if (this.showType === "图表") {
          this.searchResult = await this.getHistoryDataChart(params);
          if (this.searchResult && this.searchResult.data) {
            this.lineOptions = {};
            this.configLineChart();
          }
        } else if (this.showType === "表格") {
          await this.getHistoryDataList({ ...params, ...pageOption });
        }
        // if (this.showType === "图表") {
        //   this.searchResult = await this.getHistoryDataChart(
        //     params,
        //     this.dataType
        //   );
        //   if (this.searchResult && this.searchResult.data) {
        //     this.lineOptions = {};
        //     this.configLineChart();
        //   }
        // await realform(params).then((res) => {
        // this.searchResult = {};
        // this.searchResult = {
        // factorField: {
        //   pH: "ph",
        //   ORP: "orp",
        //   色度: "chroma",
        //   TOC: "toc",
        //   COD: "cod",
        //   浊度: "turbidity",
        //   UV254: "uv254",
        // },

        // factorStatus: {
        //   pH: "devicePh",
        //   ORP: "deviceOrp",
        //   色度: "deviceChroma",
        //   TOC: "deviceToc",
        //   COD: "deviceCod",
        //   浊度: "deviceTurbidity",
        //   UV254: "deviceUv254",
        // },
        //   data: res.data.data,
        // };
        //   if (this.searchResult && this.searchResult.data) {
        //     this.lineOptions = {};
        //     this.configLineChart();
        //   }
        // });
        // } else if (this.showType === "表格") {
        //   // reallist({ ...params, ...pageOption }).then((res) => {
        //   //   this.realtotal = res.data.total;
        //   //   this.minuhisDataList = res.data.data;
        //   // });
        //   await this.getHistoryDataList(
        //     { ...params, ...pageOption },
        //     this.dataType
        //   );
        // }
      }

      this.hisLoading = false;
    },
    openExportOption() {
      this.exportExcelVisible = true;
      this.exportOption.starttime = this.timePickerDay[0] + " 00:00:00";
      this.exportOption.lasttime = this.timePickerDay[1] + " 23:59:59";
    },
    async exportExcel() {
      const message = this.$message({
        message: "正在导出数据, 请稍后",
        duration: 0,
      });
      this.exportOption.isExcel = "yes";
      var params = {};
      if (this.dataType === "hour" || this.dataType === "oneHour") {
        params = {
          starttime: this.exportOption.starttime,
          lasttime: this.exportOption.lasttime,
          isExcel: this.exportOption.isExcel,
          stations: this.exportOption.stations,
        };
        await post.postHistoryDataListExcel(params);
        this.exportOption.isExcel = "no";
      } else {
        let start = new Date(this.exportOption.starttime).getTime();
        let last = new Date(this.exportOption.lasttime).getTime();
        if (last - start < 86400000) {
          var stations = [];
          stations.push(this.exportOption.stations);
          params = {
            starttime: this.exportOption.starttime,
            lasttime: this.exportOption.lasttime,
            isExcel: this.exportOption.isExcel,
            stations: stations,
          };
          realExcel(params).then((res) => {
            this.exportOption.isExcel = "no";
          });
        } else {
          const message = this.$message({
            type: "error",
            duration: 3 * 1000,
            message: "每次只支持导出一天的数据",
          });
        }
      }
      message.close();
    },
    async retrieveData() {
      this.findVisible = true;
      this.findOption.waterstation = this.searchForm.waterstation;
      this.findOption.starttime = this.timePickerDay[0] + " 00:00:00";
      this.findOption.lasttime = this.timePickerDay[1] + " 23:59:59";
      // let search = this.searchForm;
      // this.$confirm(
      //   `确定找回 ${search.waterstation}，${this.timePickerDay[0]} 00:00:00  到  ${this.timePickerDay[1]} 00:00:00 的数据吗？（注意时分秒）`,
      //   "提示",
      //   {
      //     confirmButtonText: "确定",
      //     cancelButtonText: "取消",
      //     type: "warning",
      //   }
      // ).then(async () => {
      //   const res = await this.fetchRetrieveData(search);
      //   if (res === "success") {
      //     await this.submitSearch();
      //     this.$notify({
      //       type: "success",
      //       title: "成功",
      //       message: "正在找回数据中，请稍后重新筛选查看！",
      //     });
      //   }
      // });
    },
    async findHandle() {
      const res = await this.fetchRetrieveData(this.findOption);
      if (res === "success") {
        await this.submitSearch();
        this.$notify({
          type: "success",
          title: "成功",
          message: "正在找回数据中，请稍后重新筛选查看！",
        });
      }
    },
    async showTypeChange() {
      this.changePageNum(1);
      this.lineOptions = {};
      this.resetData();
      if (this.stationList.length && this.stationList.length > 0) {
        this.submitSearch();
      } else {
        this.isNoData = false;
      }
    },
    async changeSelect(e) {
      this.changePageNum(1);
      this.resetData();
      this.dataType = e;
      this.lineOptions = {};
      if (e === "mimute") {
        await this.getStationListName({ dataType: null });
        this.is_multiple = false;
        this.timePickerDay = [
          common.changeDateToString(new Date(new Date().getTime() - 86400)),
          common.changeDateToString(new Date()),
        ];
        this.searchForm.waterstation = this.stationList
          ? this.stationList[0]
          : "";

        if (this.stationList.length && this.stationList.length > 0) {
          this.submitSearch();
        } else {
          this.isNoData = false;
        }
      } else {
        if (e === "oneHour") {
          await this.getStationListName({ dataType: 0 });
        } else {
          await this.getStationListName({ dataType: 1 });
        }
        this.is_multiple = true;
        this.timePickerDay = [
          common.changeDateToString(new Date(new Date().getTime() - 518400000)),
          common.changeDateToString(new Date()),
        ];
        this.searchForm.waterstation = this.stationList
          ? this.stationList[0]
          : "";
        if (this.stationList.length && this.stationList.length > 0) {
          this.submitSearch();
        } else {
          this.isNoData = false;
        }
      }
    },
    changeStation() {
      this.changePageNum(1);
      this.lineOptions = {};
      this.isNoData = false;
      this.resetData();
      if (this.stationList.length && this.stationList.length > 0) {
        this.submitSearch();
      } else {
        this.isNoData = false;
      }
    },
    changeTime() {
      this.changePageNum(1);
      this.lineOptions = {};
      this.resetData();
      if (this.stationList.length && this.stationList.length > 0) {
        this.submitSearch();
      } else {
        this.isNoData = false;
      }
    },
    close() {
      if (this.dataType === "hour" || this.dataType === "oneHour") {
        this.exportOption.stations = [];
      } else {
        this.exportOption.stations = "";
      }
    },
  },
  computed: {
    ...mapGetters({
      stationList: "getStationList",
      factorField: "getHistoryDataFactorField",
      factorStatus: "getHistoryDataFactorStatus",
      hisDataList: "getHistoryData",
      historyDataTotal: "getHistoryDataTotal",
      historyHasCod: "getHistoryHasCod",
      userInfo: "getUserInfo",
      //分页依赖
      pageSize: "getPageSize",
    }),
  },
  components: {
    lineChart,
    myPaging,
    tableList,
  },
};
</script>
<style scoped>
.historyData {
  min-height: 100%;
}

.searchBox {
  padding: 20px 20px 0;
  margin-bottom: 20px;
  background-color: #fff;
}

.searchBox .miniLabel {
  line-height: 0;
}
.el-dialog {
  z-index: 3000 !important;
}
.dataChartBox {
  display: flex;
  flex-flow: row wrap;
  /* justify-content: space-between; */
  justify-content: flex-start;
  width: 100%;
}

.dataChartBox .chart {
  position: relative;
  width: 31%;
  margin: 0 1%;
  height: 300px;
  min-height: 300px;
  background: #fff;
  margin-bottom: 20px;
}

.dataChartBox .chart .openchart {
  position: absolute;
  right: 12px;
  top: 12px;
  z-index: 1;
}

.dataChartBox .chart .openchart i {
  font-size: 12px;
}

.dataChartCnt {
  background-color: #fff;
  padding: 0 20px;
}

.title {
  position: relative;
  color: #666;
  line-height: 70px;
  font-size: 16px;
  margin-left: 15px;
}

.title::before {
  content: "";
  position: absolute;
  left: -15px;
  width: 4px;
  height: 20px;
  top: 25px;
  background-color: #2399ff;
}

.hisDataTable {
  background-color: #fff;
  padding: 0 20px 20px 20px;
}

.searchBtns {
  margin-top: 19px;
}

.deatailChartCnt {
  width: 100%;
  height: 450px;
}

.deatailChartCnt .deatailChart {
  width: 100%;
  height: 100%;
}

.noData {
  width: 100%;
  line-height: 60px;
  text-align: center;
  color: #909399;
}

.showType {
  background-color: #fff;
  padding: 20px;
}
</style>
<style>
.historyChart .el-dialog__header {
  background-image: none;
}

.historyChart .el-dialog__headerbtn .el-dialog__close {
  color: #666;
}
</style>
